<template>
  <div>
    <el-container>
      <el-header><Header1></Header1></el-header>
      <el-main>

        <div id="title">模型上传</div>

        <div>
          <el-steps :active="2" align-center>
            <el-step title="步骤1" description="提交模型相关信息"></el-step>
            <el-step title="步骤2" description="提交模型使用规范"></el-step>
            <el-step title="步骤3" description="提交模型运行方式"></el-step>
            <el-step title="步骤4" description="提交模型测试用例"></el-step>
          </el-steps>
        </div>

        <el-form ref="modeldepform" 
          :model="modeldepform"
          :rules="rules" >
        
          <el-row :gutter="24" type="flex" justify="center">
            <el-col :span="24">
              <el-form-item prop="modeltype">
                <el-select 
                  v-model="modeldepform.modeltype" 
                  placeholder="模型类别"
                  @change="selectType"
                  >
                  <!--循环的是一个数组，item为对象-->
                  <el-option  
                    v-for="item in typelist"
                    :key="item.key"
                    :label="item.value"
                    :value="{ value: item.key, label: item.value }" 
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
    
          <el-row type="flex" justify="center">
            <el-col :span="4">
              <el-form-item prop="software">
                <el-input v-model="modeldepform.software" placeholder="输入软件环境"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex" justify="center">
            <el-col :span="4">
              <el-form-item prop="hardware">
                <el-input v-model="modeldepform.hardware"  placeholder="输入硬件环境"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex" justify="center">
            <el-col :span="4">
              <el-form-item prop="frame">
                <el-input v-model="modeldepform.frame" placeholder="输入框架"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex" justify="center">
            <el-col :span="4">
              <el-form-item prop="rely">
                <el-input v-model="modeldepform.rely"  placeholder="输入依赖"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex" justify="center">
            <el-col :span="2">
              <el-form-item>
                <el-button round @click="upload1">上一步</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item>
                <el-button round disabled>提交</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item>
                <el-button round @click="submitForm('modeldepform')">下一步</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

      </el-main>
      <el-footer height="120px"><Footer></Footer></el-footer>
    </el-container>
  </div>
</template>

<script>

// @ is an alias to /src
import Header1 from "@/components/Header1";
import Footer from "@/components/Footer";

export default {
  name: "upload2",
  components: { Footer, Header1},
  data() {

    return {
      items:[
        Header1
      ],
      modeldepform: {
        modelcode: '',
        modeltype: '',
        software: '',
        hardware: '',
        frame: '',
        rely: ''
      },
      typelist: [
        {"key": "1", "value": "计算机视觉" },{"key": "2", "value": "自然语言处理" },
        {"key": "3", "value": "数据挖掘" },{"key": "4", "value": "深度学习" },
        {"key": "5", "value": "智能机器人" },{"key": "6", "value": "自动程序设计" }
      ],
      rules: {
        software: [{ required: true, message: '请输入软件环境', trigger: 'blur'}],
        hardware: [{ required: true, message: '请输入硬件环境', trigger: 'blur' }],
        frame: [{ required: true, message: '请输入框架', trigger: 'blur' }],
        rely: [{ required: true, message: '请输入依赖', trigger: 'blur' }]
      }
    }
  },
  methods:{
    upload1(){
      this.$router.push("/upload1")
    },
    submitForm(formName) {
      let fd = new FormData();
      fd.append("model_code",this.modeldepform.modelcode);
      fd.append("model_type",this.modeldepform.modeltype);
      fd.append("software",this.modeldepform.software);
      fd.append("hardware",this.modeldepform.hardware);
      fd.append("frame",this.modeldepform.frame);
      fd.append("rely",this.modeldepform.rely);

      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      this.$refs[formName].validate(valid => {
        if(valid){
          this.$axios.post("user/login/register", fd, config).then(res => {
            alert(res.data.msg)
            if(res.data.msg === "下一步")
            {
              console.log(res.data)
              this.$router.push({path:'/upload3'})
            }
          }).catch(res => {
              alert(res.data.msg)
          })
        }else{
          alert("请检查输入信息!")
        }
      })
    },
    // 选择模型种类
    selectType(data) {  // data为el-option上:value绑定的对象
      // 将data对象解构
      const { value, label } = data;
      // 对formValue中的模型code和模型种类名称重新赋值
      this.modeldepform.modelcode = value;     // 1
      this.modeldepform.modeltype = label; // 计算机视觉
      console.log(this.modeldepform.modelcode,this.modeldepform.modeltype)
    },
  }
}
</script>

<style scoped>
/deep/ .el-step__head.is-finish {
  color: #3A62D7;
  border-color: #3A62D7;
}
/deep/ .el-step__title.is-finish {
  color: #3A62D7;
}
/deep/ .el-step__description.is-finish {
  color: #3A62D7;
}

/deep/ .el-input__inner { /*或者 .s2>>>.el-input__inner  */

  border-radius: 20px; /*输入框圆角值*/
  background-color: #ffffff;
  /*background: transparent;*/
}


.el-button {
  background: #3A62D7;
  border: #3A62D7;
  color: #F5F5F5;
}
.el-row {
  margin-top: 30px;
  margin-bottom: 20px;
}

#title {
  color: #333333;
  font-size: 30px;
  font-weight: bold;
  border: #333333;
  margin-top: 50px;
  margin-bottom: 20px;
}

.el-header{
  background-color: #F5F5F5;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-footer {
  background-color: #F5F5F5;
  color: #333;
  text-align: center;
  line-height: 3px;

}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 150px;
}

.el-main {
  background-color: #F5F5F5;
  background-size: 100% 100%;
  /*background-color: #E9EEF3;*/
  /*color: #333;*/
  text-align: center;
  height: 800px;
  padding: unset;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>